@extends('admin.layouts.app')
@section('css')
@endsection
@inject('permissionrole','App\Repositories\Presenter\PermissionRolePresenter')
@section('content')
<div class="">
	<div class="page-title">
		<div class="title_left">
			<h3>角色管理</h3>
		</div>
	</div>

	<div class="clearfix"></div>
	<div class="row">
		<div class="col-md-12 col-sm-12 col-xs-12">
			<div class="x_panel">
				<div class="x_title">
					<h2>授权管理</h2>
					<div class="clearfix"></div>
				</div>
				<div class="x_content">
					<br />
					<form class="form-horizontal form-label-left" action="{{route('role.authpost',['id'=>$id])}}" method="post">
						{{ csrf_field() }}
						<table class ="table table-bordered" id="authRule" style="width:100%">
						{!! $permissionrole->getPermissionTree($permissions,$permissionbyrole) !!}
						</table>
						<div class="ln_solid"></div>
						<div class="form-group">
							<div class="col-xs-12 text-center">
								<button type="submit" class="btn btn-success">
								提交
								</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
@endsection

@section('js')
<script src="/admins/vendors/treetable/jquery.treeTable.js"></script>
<script type="text/javascript">
	$(function(){
        var option = {
            theme:'vsStyle',
            expandLevel : 1,
            beforeExpand : function($treeTable, id) {
                //判断id是否已经有了孩子节点，如果有了就不再加载，这样就可以起到缓存的作用
                if ($('.' + id, $treeTable).length) { return; }
                //这里的html可以是ajax请求
                var html = '<tr id="8" pId="6"><td>5.1</td><td>可以是ajax请求来的内容</td></tr>'
                         + '<tr id="9" pId="6"><td>5.2</td><td>动态的内容</td></tr>';

                $treeTable.addChilds(html);
            },
            onSelect : function($treeTable, id) {
                window.console && console.log('onSelect:' + id);
            }
			//checkbox
        };
        $('#authRule').treeTable(option);
    });
    function toggleCheck(obj){
    		//判断当前是否选中
    		if($(obj).is(':checked')) {
    			isSelected = true;
    		}else{
    			isSelected = false;
    		}
    		
    		pId = obj.parentNode.parentNode.id;
    		toggleChild(pId,isSelected);
    }
    var obj ={};
    function toggleChild(id,isSel = true){
    		$("tr[pid='"+id+"']>td>input[type='checkbox']").prop('checked',isSel);
    		obj[id] = $("tr[pid='"+id+"']");
    		obj[id].map(function(item){
    			cItem = $(obj[id][item]);
    			cid = cItem.attr("id");
    			if(cItem.attr("haschild")){
    				toggleChild(cid,isSel);
    			}
    		});
    }
</script>
@endsection
